<template>
  <!-- 搜索栏部分开始 -->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <!-- model 绑定表单数据 -->
      <el-form :inline="true" :model="queryFlaw" class="demo-form-inline">
        <el-form-item label="缺陷描述">
          <el-input v-model="queryFlaw.flawDescription" placeholder="请输入缺陷描述"/>
        </el-form-item>


        <el-form-item label="检测项类型">
            <el-select style="width: 200px;" v-model="queryFlaw.checkItemType" placeholder="请选择检测项类型" clearable>
              <el-option label="全部" value="" :selected="true" />
              <el-option v-for="type in types" :value="type.checkItemType" :label="type.checkItemType"/>
            </el-select>
          </el-form-item>

        <el-form-item label="缺陷等级">
            <el-select style="width: 200px;" v-model="queryFlaw.flawLevel" placeholder="请选择检测等级" clearable>
              <el-option label="全部" value="" :selected="true" />
              <el-option v-for="type in types" :value="type.flawLevel" :label="type.flawLevel"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadFlaw">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 搜索栏部分结束 -->

  <!-- 工具栏部分开始 -->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <el-tooltip
          class="box-item"
          effect="dark"
          content="新增缺陷"
          placement="top-start"
      >
        <el-button @click="toAddFlaw" type="primary">
          <el-icon>
            <Plus/>
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-button @click="editBtnHandler" :disabled="editBtnDisabled" type="primary">
        <el-icon>
          <EditPen/>
        </el-icon>
      </el-button>
      <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                     @confirm="deleteBtnHandler" title="您确定要删除选中的典信息吗？">
        <template #reference>
          <el-button :disabled="deleteBtnDisabled" type="primary">
            <el-icon>
              <Minus/>
            </el-icon>
          </el-button>
        </template>
      </el-popconfirm>

      <el-button @click="exportFlaw" type="primary">
        <el-icon>
          <Download/>
        </el-icon>
      </el-button>

      <el-upload
          style="display: inline-block; margin-left: 10px; margin-top: 5px"
          class="upload-demo"
          :action="importUserUrl"
          :limit="1"
          name="file"
          :on-exceed="importUserSuccess"
      >
        <el-button type="primary">
          <el-icon>
            <Upload/>
          </el-icon>
        </el-button>
      </el-upload>

    </el-col>

  </el-row>
  <!-- 工具栏部分结束 -->

  <!-- 列表部分开始 -->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <el-table ref="flawTabel" @selection-change="handleSelectionChange" :data="flaws" border :stripe="true"
                style="width: 95%">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="flawDescription" label="缺陷描述"/>
        <el-table-column prop="checkItemType" label="缺陷类型" />
          <el-table-column prop="flawLevel" label="缺陷等级">
        </el-table-column>
        <!-- 行工具栏 -->
        <el-table-column width="140" label="操作">
          <template #default="scope">
            <el-button type="primary" @click="toEditFlaw(scope.row.flawDescription)" size="small">编辑</el-button>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                           @confirm="deleteFlaw(scope.row.flawDescription)" title="您确定要删除这个字典信息吗？">
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 列表部分结束 -->
  <!-- 分页部分开始 -->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit"
                     :total="total"/>
    </el-col>
  </el-row>
  <!-- 分页部分结束 -->
<!--使用子组件-->
  <FlawAddWin :visible="addFlawVisble" @optionCompleted="addOptionCompleted"/>
  <FlawEditWin :visible="editFlawVisble" :flawDescription="editflawDescription" @optionCompleted="FlawOptionCompleted"/>
</template>

<script>
import FlawAddWin from "@/views/qc/flaw/flaw-add-win.vue";
import FlawRequest  from "@/api/flaw.js";
import FlawEditWin  from "@/views/qc/flaw/flaw-edit-win.vue";

import config from "../../../util/config.js"
export default {
  components:{
    FlawAddWin,
    FlawEditWin,
  },
  name: "flaw.vue",
  data(){
    return{
      queryFlaw:{},//绑定查询条件
      types:{},//绑定查询的所有检查项类别
      addFlawVisble :false,//新增缺陷的弹窗是否显示
      flaws:[],//绑定查询的缺陷信息
      limit:5,//每页显示的记录数
      page:1,//当前页码
      total:0,//总记录数

      editflawDescription:"",//通过缺陷描述找到对应的缺陷
      editFlawVisble:false,//编辑缺陷的弹窗是否显示

      editBtnDisabled:true,//编辑按钮是否禁用
      exportUrl:"",//导出缺陷的url

      importUserUrl:config.qcUrl + "/md/flaw/import",//导入缺陷的url
      uploadDemoVisible:false,//导入用户导入的弹窗是否显示

      deleteBtnDisabled:true,//删除按钮是否禁用

    }
  },methods:{
  /**
   * 导入用户成功得处理事件
   */
  importUserSuccess(res,file,files){
    this.$message({
      type: 'succsss',
      message: res.msg
    });
    //重新加载
    this.loadFlaw();
  },

    exportFlaw(){
      //超链接下载导出文件
      let url = config.qcUrl + "/md/flaw/export?a=1";
      for(let paramName in this.queryFlaw){
        if(this.queryFlaw[paramName]){
          url += "&" + paramName + "=" + this.queryFlaw[paramName];
        }
      }
      url += "&page=" + this.page +"&limit=" + this.limit;
      //超链接请求
      location.href = url;
    },
    /**
     * 工具栏删除按钮事件
     */
    deleteBtnHandler() {
      let selectionRows = this.$refs.flawTabel.getSelectionRows();
      let flawDescriptions = new Array();
      selectionRows.forEach(row => {
        flawDescriptions.push(row.flawDescription);
      })
      FlawRequest.deleteFlaws(flawDescriptions, res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.loadFlaw();
      });
    },

    /**
     * 监听删除缺陷的子组件操作完成的事件
     */
    deleteFlaw(flawDescription){
        FlawRequest.deleteFlaw(flawDescription, res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.loadFlaw();
        });

    },

    /**
     * 监听编辑缺陷的子组件操作完成的事件
     * @constructor
     */
    FlawOptionCompleted(){
      this.editFlawVisble=false;
      this.loadFlaw();
    },

    /**
     * 监听编辑字典的子组件操作完成的事件
     */
    editOptionCompleted() {
      // 将弹窗设置为false
      this.editFlawVisble = false;
      // 重新加载列表
      this.loadFlaw();
    },

    /**
     * 行编辑按钮事件
     */
    toEditFlaw(flawDescription) {
      // 将传入的dictId设置到editDictId
      this.editflawDescription= flawDescription;
      // 弹出编辑窗体
      this.editFlawVisble = true;
    },
    /**
     * 翻页的事件
     * @Param currentPage 最新的页码
     */
    pageChange(currentPage, pageSize) {

      // 将最新的页码赋值给this.currentPage
      this.page = currentPage;
      // 重新加载数据
      this.loadFlaw();
    },


    /**
     * 表格中数据选择事件
     */
    handleSelectionChange() {
      let selectionRows = this.$refs.flawTabel.getSelectionRows();
      if (selectionRows.length == 0) {
        this.editBtnDisabled = true;
        this.deleteBtnDisabled = true;
      } else if (selectionRows.length == 1) {
        this.editBtnDisabled = false;
        this.deleteBtnDisabled = false;
      } else {
        this.editBtnDisabled = true;
        this.deleteBtnDisabled = false;
      }
    },

    /**
     * 工具栏编辑按钮事件
     */
    editBtnHandler() {
      let editFlaw = this.$refs.flawTabel.getSelectionRows()[0];
      if (editFlaw != undefined) {
        this.editflawDescription = editFlaw.flawDescription;
        this.editFlawVisble = true;
      } else {
        this.$message({
          type: 'warning',
          message: '请选择要编辑的信息!'
        });
      }
    },

    /**
     * 监听添加缺陷的子组件操作完成的事件
     */
    addOptionCompleted() {
      // 将弹窗设置为false
      this.addFlawVisble = false;
      // 重新加载列表
      this.loadFlaw();
    },
    /**
     * 工具栏的新增缺陷按钮事件
     */
    toAddFlaw() {
      // 弹窗 addDictVisble设置为true
      this.addFlawVisble = true;
    },


    /**
     * 重置
     */
    reset(){
      this.queryFlaw = {};
      this.loadFlaw();
    },
    /**
     * 加载缺陷信息
     */
    loadFlaw(){
      this.queryFlaw.page = this.page;
      this.queryFlaw.limit = this.limit;
      FlawRequest.loadFlaw(this.queryFlaw,res=>{
        this.flaws = res.data.data;
        this.total = res.data.total;
      })
    },
    loadFlawAll(){
      FlawRequest.loadFlawAll(res=>{

        const types = res.data.map(item => {
          return {
            checkItemType: item.checkItemType,
            flawLevel: item.flawLevel
          }
        })
        let seen = {};
        let filteredArr = types.filter(item => {
          let key = item.checkItemType + '|' + item.flawLevel;
          if (!seen[key]) {
            seen[key] = true;
            return true;
          }
          return false;
        });
        this.types = filteredArr;
      })
    },
  },mounted() {
    this.loadFlaw();
    this.loadFlawAll();

  }
}
</script>

<style scoped>

</style>